<template>
  <div style="height:100%;width:100%">
    <el-row class="mainContent" >
      <!--列表-->
      <el-table :data="users" highlight-current-row  v-loading="listLoading" style="width: 100%;">
        <el-table-column label="ID" prop="id">
        </el-table-column>
        <el-table-column label="手机号" prop="username">
        </el-table-column>
        <el-table-column label="资金总额" prop="amount">
        </el-table-column>
        <el-table-column  label="保证金/借款额"  >
          <template slot-scope="scope">
            {{scope.row.amountBond}}/{{scope.row.amountApply}}
          </template>
        </el-table-column>
        <el-table-column label="申请时间" prop="applytime">
        </el-table-column>
        <el-table-column  label="警戒线/平仓线" >
          <template slot-scope="scope">
            {{scope.row.amountWarn}}/{{scope.row.amountSell}}
          </template>
        </el-table-column>
        <el-table-column  label="交易账号" prop="subUsername">
        </el-table-column>
        <el-table-column  label="类型" >
          <template slot-scope="scope">
            {{scope.row.type | typeFormat}}
          </template>
        </el-table-column>
        <el-table-column  label="状态" >
          <template slot-scope="scope">
            {{scope.row.state | stateFormat}}
          </template>
        </el-table-column>
        <el-table-column  label="操作" >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="detail(scope.$index,scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10"  :total="total" style="float:right;">
      </el-pagination>
    </el-row>
    <el-dialog title="方案详情" :visible.sync="dialogFormVisible" width="40%" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :model="form" ref="editPwdForm" status-icon :rules="editFormRules" style="text-align:left">
        <el-form-item>
          <el-col :span="10">
            <label>用户ID</label><span class="rights">{{form.userId}}</span>
          </el-col>
          <el-col :span="10" :offset="3" >
            <label>用户名/手机号</label><span class="rights">{{form.username}}</span>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="10">
            <label>资金总额</label><span class="rights">{{form.amount}}</span>
          </el-col>
          <el-col :span="10" :offset="3">
            <label>保证金/借款额</label><span class="rights">{{form.amountBond}}/{{form.amountApply}}</span>
          </el-col>
        </el-form-item>
        <el-form-item >
          <el-col :span="10">
            <label>当日最大借款额</label><span class="rights">{{form.amountApplyMax}}</span>
          </el-col>
          <el-col :span="10" :offset="3">
            <label>当前日息</label><span class="rights">{{form.amountRate}}</span>
          </el-col>
        </el-form-item>
        <el-form-item >
          <el-col :span="10">
            <label>累计扣息总额</label><span class="rights">{{form.amountRateTotal}}</span>
          </el-col>
          <el-col :span="10" :offset="3">
            <label>警戒线/平仓线</label><span class="rights">{{form.amountWarn}}/{{form.amountSell}}</span>
          </el-col>
        </el-form-item>
        <el-form-item  >
          <el-col :span="10">
            <label>可用余额</label><span class="rights">{{form.amountBalance}}</span>
          </el-col>
          <el-col :span="10" :offset="3">
            <label>总盈亏</label><span class="rights">{{form.amountDifference}}</span>
          </el-col>
        </el-form-item>
        <el-form-item  >
          <el-col :span="10">
            <label>状态</label><span class="rights">{{form.state | stateFormat}}</span>
          </el-col>
          <el-col :span="10" :offset="3">
            <label>类型</label><span class="rights">{{form.type | typeFormat}}</span>
          </el-col>
        </el-form-item>
        <el-form-item  >
          <el-col :span="10">
            <label>子账号名称</label><span class="rights">{{form.subUsername}}</span>
          </el-col>
          <el-col :span="10" :offset="3">
            <label>子账号状态</label><span class="rights">{{form.subState==10?'不可用':'可用'}}</span>
          </el-col>
        </el-form-item>
        <el-form-item  >
          <el-col :span="10">
            <label>扣息时间</label><span class="rights" style="width:75px">{{form.rateDeductDay}}</span>
          </el-col>
          <el-col :span="10" :offset="3">
            <label>下次扣息时间</label><span class="rights" style="width:75px">{{form.rateDeductNextDay}}</span>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="dialogFormVisible = false">关 闭</el-button>
        <!--<el-button type="primary" @click.native="submitDialog" :loading="editPwdLoading">确 定</el-button>-->
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        options:[{
          label:'待支付',
          value:'10'
        },{
          label:'待开通',
          value:'11'
        },{
          label:'已取消',
          value:'12'
        },{
          label:'使用中',
          value:'13'
        },{
          label:'申请结算',
          value:'14'
        },{
          label:'已结算',
          value:'15'
        }],
        optionss:[{
          label:'日',
          value:'1'
        },{
          label:'周',
          value:'2'
        },{
          label:'月',
          value:'3'
        },{
          label:'年',
          value:'4'
      }],
        filters: {
          nickname:'',
          phone:'',
          begtime:'',
          endtime:"",
        },
        form:{},
        editFormRules:{},
        users:[],
        page: 1,
        total: 0,
        listLoading: false,
        filte:{},
        dialogFormVisible:false,
        editPwdLoading:false
      };
    },
    filters:{
      typeFormat(val){
        switch (val){
          case 1:
            return '日'
            break;
          case 2:
            return '周'
            break;
          case 3:
            return '月'
            break;
          case 4:
            return '年'
            break;
        }
      },
      stateFormat(val){
        switch (val){
          case 10:
            return '待支付'
            break;
          case 11:
            return '待开通'
            break;
          case 12:
            return '已取消'
            break;
          case 13:
            return '使用中'
            break;
          case 14:
            return '申请结算'
            break;
          case 15:
            return '已结算'
            break;
        }
      }
    },
    created() {
      this.getUsers();
    },
    methods: {
      getUsers() {
        this.users = []
        this.listLoading = true;
        var obj = {
          data:{
            pageNo:this.page,
          }
        };
        this.$http('sys/financing/listExpire.do',obj).then(resp => {
          if(resp.code==1){
            this.users = resp.data.list;
            this.total = resp.data.total
          }
          this.listLoading = false;
        });

      },
      handleCurrentChange(val) {
        this.page = val;
        this.getUsers();
      },
      detail(index,row){
        this.form = row
        this.dialogFormVisible = true;
      }

    }
  };
</script>

<style scoped>
.rights{
  float:right
}

  .el-table:hover{
    cursor: pointer !important;
  }
</style>
